<template>
  <div>
    <div @click="onClick">
      <div class="icon_box_item">
        <div :class="icon" ref="icon"></div>
        <div ref="title">{{title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      begin: "",
      type: String
    },
    title: {
      begin: "",
      type: String
    },
    fontsize: {
      begin: "",
      type: String
    },
    color:{
        begin: "",
      type: String
    },
    fontSize:{
       begin: "",
      type: String
    }
  },
  mounted() {
    this.$refs.title.style.fontSize = this.fontsize + "rem";
    this.$refs.icon.style.color = this.color;
    this.$refs.icon.style.fontSize = this.fontSize + "rem";
  },
  methods: {
      onClick(){
        //   this.$emit("onClick")
        console.log()
      }
  },
};
</script>

<style scoped>
.icon_box_item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.iconfont {
  font-size: 0.53rem;
}

</style>